<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="24" :lg="24">
        <blockquote class="text-blue" style="font-size: 14px;">
          <table>
            <tr>
              <td>
                <b>当前套餐</b>
              </td>
              <td>
                <span style="margin-left: 10px">套餐名称：<span style="color: #5cbbff">{{ uorder.goodName }}</span></span>
              </td>
              <td>
                <span style="margin-left: 10px">支持通道：</span>
              </td>
              <td>
                <span style="color: #5cbbff" v-show="uorder.payChannel == '无'">无</span>
                <dict-tag :options="dict.type.payment_channel" :value="uorder.payChannel" v-show="uorder.payChannel != '无'" />
              </td>
              <td>
                <span style="margin-left: 10px">费率：<span style="color: #96d3ff">{{ uorder.rate }}%</span></span>
              </td>
              <td>
                <span style="margin-left: 10px">应用数量：</span>
              </td>
              <td>
                <el-tag class="el-tag--plain">{{ uorder.appNum }}个</el-tag>
              </td>
            </tr>
          </table>
          </blockquote>

        <hr />
      </el-col>
    </el-row>

    <el-row :gutter="20">

      <el-col :xs="24" :sm="24" :md="12" :lg="6" v-for="(item,i) in goodList" style="padding-bottom: 20px">
        <el-card class="update-log">
          <div class="body">
            <h3><b>{{ item.goodName }}</b></h3>
            <p style="line-height: 28px;"><b style="float: left">支持通道：</b>
              <dict-tag :options="dict.type.payment_channel" :value="item.payChannel"/>
            </p>
            <p><b>结算费率：</b><el-tag class="el-tag--danger">{{ item.rate }}%</el-tag></p>
            <p><b>应用数量：</b><el-tag class="el-tag--plain">{{ item.appNum }}个</el-tag></p>
            <p><b>商品价格：</b><el-tag class="el-tag--success">￥{{ item.price }}</el-tag></p>
            <p><b>有效时长：</b><el-tag class="el-tag--warning">{{ item.effectiveTime }}月</el-tag></p>
            <p><b>购买数量：</b><el-input-number :min="1" :max="36" v-model="from.effectiveTime" size="small" /></p>
            <el-button
              size="mini"
              icon="el-icon-shopping-cart-full"
              plain
              @click="pay(1,item.id)"
              style="width: 45%;height: 40px"
            >支付宝支付</el-button>
            <el-button
              size="mini"
              icon="el-icon-shopping-cart-full"
              plain
              @click="pay(2,item.id)"
              style="width: 45%;height: 40px"
            >微信支付</el-button>
          </div>
        </el-card>
      </el-col>

    </el-row>

    <el-dialog
      title="在线支付"
      :visible.sync="centerDialogVisible"
      width="20%"
      center>
      <span>
        <img :src="payUrl" width="100%" alt="" />
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">已完成支付</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<script>
import {getGoodList} from "@/api/system/good";
import { zfbPay, wxPay ,getUserOrder} from "@/api/system/order";

export default {
  name: "ugood",
  dicts: ['payment_channel'],
  data() {
    return {
      //微信支付弹窗
      centerDialogVisible:false,
      //微信支付地址
      payUrl:"",
      //商品列表
      goodList: [],
      //用户当前套餐
      uorder:{
        goodId:0,
        goodName:"无",
        payChannel:"无",
        rate:"0.00",
        appNum:"0"
      },
      from:{
        effectiveTime:1
      },
      // 商品查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        goodName: null,
        price: null,
        introduction: null,
        payChannel: null,
        appNum: null,
        rate: null,
        effectiveTime: null,
        status: 2,
      }
    };
  },
  created() {
    this.getList();
    //获取用户当前订单
    getUserOrder().then(response => {
      if(response != null && response != ""){
        this.uorder.goodId = response.goodId;
        this.uorder.goodName = response.goodName;
        this.uorder.rate = response.rate;
        this.uorder.payChannel = response.payChannel;
        this.uorder.appNum = response.appNum;
      }
    });
  },
  methods: {
    /** 查询可用商品 */
    getList() {
      getGoodList(this.queryParams).then(response => {
        this.goodList = response.rows;
      });
    },
    /** 商品下单 */
    pay(type,id){
      getUserOrder().then(response => {
        if(response != null && response != ""){
          this.$modal.msgError("您当前还有套餐未到期，需要解绑后才能重新下单！");
        }else{
          if(type == 1){
            this.from.id = id;
            zfbPay(id,this.from.effectiveTime).then(response => {
              if(response != null){
                this.payUrl = response;
                this.centerDialogVisible = true
              }else{
                this.$modal.msgError("支付失败，请稍后重试 或 联系管理人员！");
              }
            });
          }
          if(type == 2){
            wxPay(id,this.from.effectiveTime).then(response => {
              if(response != null){
                this.payUrl = response;
                this.centerDialogVisible = true
              }else{
                this.$modal.msgError("支付失败，请稍后重试 或 联系管理人员！");
              }
            });
          }
        }
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

</style>

